<template>
	<view class="post-CurrentAccount">
		<view class="content">
			<view class="list" v-for="(item, infoIndex) in info" :key="infoIndex">
				<view class="strip" v-for="(val, indexn) in item.list" :key="indexn">
					<view class="left">
						<image src="https://h5.ylsp.vip/file/static/icons-21.png" v-if="val.title === '订单积分'"></image>
						<image src="https://h5.ylsp.vip/file/static/icons-22.png" v-else-if="val.title === '转账积分'"></image>
						<image src="https://h5.ylsp.vip/file/static/icons-24.png" v-else-if="val.title === '运营积分'"></image>
						<image src="https://h5.ylsp.vip/file/static/icons-25.png" v-else-if="val.title === '积分消费'"></image>
						<image src="https://h5.ylsp.vip/file/static/icons-23.png" v-else-if="val.title === '月管理奖'"></image>
						<image src="https://h5.ylsp.vip/file/static/icons-27.png" v-else></image>
					</view>
					<view class="right">
						<view class="name">
							{{ val.title }}
						</view>
						<view class="time">
							{{ val.addTime }}
						</view>
						<view class="amount" v-if="val.pm == 1">
							+{{ val.number }}
						</view>
						<view class="amount" v-if="val.pm == 0">
							{{ val.number }}
						</view>
						<view class="phone">
							{{ val.phone }}
						</view>
					</view>
				</view>
			</view>
			<Loading :loaded="loaded" :loading="loading"></Loading>
		</view>
	</view>
</template>
<script>
	import {
		getCommissionInfo4day
	} from "@/api/user";
	import Loading from "@/components/Loading";
	const NAME = "CurrentAccountday";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				filterBtnstartDate: '',
				filterBtnType: 1,
				info: [],
				commission: 0,
				where: {
					page: 1,
					limit: 20
				},
				types: 3,
				loaded: false,
				loading: false
			}
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME) {



				}
			}
		},
		onLoad: function() {
			this.filterBtnstartDate = this._route.query.time;
			this.filterBtnType = this._route.query.filterBtnType;
			this.getIndex();
		},
		onPullDownRefresh() {
			console.log('refresh');
			let that = this;
			that.info = [];
			that.where.page = 1;
			that.loaded = false;
			that.loading = false;
			that.getIndex()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
		  !this.loading && this.getIndex();
		},
		methods: {

			getIndex: function() {
				let that = this;
				if (that.loading == true || that.loaded == true) return;
				that.loading = true;
				getCommissionInfo4day(that.where, that.types, that.filterBtnstartDate, that.filterBtnType).then(
					res => {
						console.log(res)
						that.loading = false;
						let listLenth = 0;
						if (res.data[0] == null) {
						}else if (res.data[0].list == null) {
						} else {
							listLenth = res.data[0].list.length
							that.info.push.apply(that.info, res.data);
						}
						that.loaded = listLenth < that.where.limit;
						that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
						that.where.page = that.where.page + 1;
					},
					err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				);
			}

		}
	}
</script>

<style scoped lang="less">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	.post-CurrentAccount {
		width: 100%;

	}

	.post-CurrentAccount .search {
		background-color: #f9f9f9;
		height: 100rpx;
		width: 100%;
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 12;
		box-sizing: border-box;
		padding-left: 30rpx;
		
		.RefreshBtn{
			position: absolute;
			right: 40rpx;
			top: 25rpx;
			
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.post-CurrentAccount .content {
		overflow-y: auto;
		padding: 0rpx 20rpx 0 20rpx;
		height: 100%;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
		
		.list{
			width: 100%;
			height: 100%;
			overflow-y: auto;
			
			.strip{
				width: 100%;
				min-height: 160rpx;
				max-height: 220rpx;
				position: relative;
				
				.left{
					height: 100%;
					width: 120rpx;
					float: left;
					text-align: center;
					image{
						width: 80rpx;
						height: 80rpx;
						margin-top: 40rpx;
					}
				}
				
				.right{
					height: 100%;
					width: calc(100% - 120rpx);
					float: left;
					box-sizing: border-box;
					padding-top: 30rpx;
					padding-bottom: 20rpx;
					border-bottom: #e8e8e8 solid 1rpx;
					position: relative;
					.name{
						font-size: 36rpx;
						color: #555555;
					}
					.time{
						font-size: 28rpx;
						padding-top: 10rpx;
						color: #999999;
					}
					.amount{
						height: 100%;
						width: 200rpx;
						position: absolute;
						top: 0;
						right: 30rpx;
						text-align: center;
						line-height: 160rpx;
						font-size: 40rpx;
						color: #333333;
					}
					
					.phone{
						color: #999999;
						font-size: 26rpx;
						padding-top: 5rpx;
					}
				}
				
				.iconfont{
					position: absolute;
					display: inline-block;
					right: 0;
					top: 60rpx;
				}
			}
		}
	}

	.post-CurrentAccount .search .column {
		width: 23%;
		float: left;
		box-sizing: border-box;
		padding: 15rpx 15rpx 0 0;
	}

	.post-CurrentAccount .search .column .btn {
		padding: 15rpx 20rpx;
		border-radius: 50rpx;
		text-align: center;
		color: #ffffff;
		background-color: #fc5531;
		font-size: 30rpx;

		.icon {
			display: inline-block;
			font-size: 22rpx;
			margin-left: 10rpx;
		}
	}



	.filter-view-bg {
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 10;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.filter-view {
		position: fixed;
		top: 100rpx;
		left: 0;
		height: 500rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		z-index: 11;

		.title {
			color: #555555;
			font-size: 36rpx;
			padding: 40rpx 30rpx 0 30rpx;
		}

		.btnBox {
			padding: 20rpx 30rpx 0 30rpx;

			.btn {
				height: 70rpx;
				width: 160rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: #e8e8e8;
				color: #555555;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				display: inline-block;
			}

			.btn.active {
				background-color: #ffeee4;
				color: #fe701e;
			}
		}

		.timeView {
			padding: 20rpx 30rpx 0 30rpx;
			overflow: hidden;

			.text {
				width: 50rpx;
				float: left;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				color: #555555;
			}

			.left,
			.right {
				float: left;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				width: 300rpx;
				background-color: #e8e8e8;
				border-radius: 10rpx;
				color: #555555;
			}
		}
		
		.footer-btn{
			height: 167rpx;
			box-sizing: border-box;
			padding: 30rpx 30rpx 0 30rpx;
			width: 100%;
			
			.ResetBtn{
				border: #fe701e solid 1rpx;
				color: #555555;
				font-size: 36rpx;
				height: 100rpx;
				width: 49%;
				border-radius: 10rpx;
				float: left;
				text-align: center;
				line-height: 100rpx;
			}
			
			.AscertainBtn{
				background-color: #fe701e;
				color: #FFFFFF;
				font-size: 36rpx;
				height: 100rpx;
				width: 49%;
				border-radius: 10rpx;
				float: right;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.filter-view.hideBox {
		transform: translate3d(0rpx, -500rpx, 0rpx);
		transition-duration: 0.5s;
	}

	.filter-view.active {
		transform: translate3d(0rpx, 0rpx, 0rpx);
		transition-duration: 0.5s;
	}
</style>
